<template>
	<view>
		<view style="height: 70vh;overflow: hidden;">

			<v-tabs-column :tabs="tabs" :is-tabbar="false" position="left" active-color="purple" inactive-color="#444"
				bg-color="#f3f3f3" active-bg-color="#ffffff" v-model="current" padding="30rpx" bold="bold"
				@change="changeTab">
				<view
					style="width: 590rpx;padding-left: 30rpx;background-color: #FFFFFF;padding-top: 40rpx;height: 100%;">
					<view v-if="two_yuan.length>0" style="width: 76%;">
						<!-- <vgt-tab class="tab-xxx"  :list="list" :defaultChoseInd="defaultChoseInd" defaultChoseItem=""
							@onValueChange="handleValueChange" /> -->
						 <scroll-view
						     class="scroll-view_hold"
						     scroll-x="true"
						     scroll-with-animation="true"
						     :scroll-left="position"
						 >
						     <view
						         v-for="(item, index) in list"
						         :key="index"
						         :style="choseInd === index ? getActiveStyle : getDefaultStyle"
						         class="scroll-view-item"
						         @click="onClickScrollItem(index, item, $event)"
						     >{{item}}</view>
						 </scroll-view>
					</view>
					<scroll-view :scroll-y="true" style="overflow: hidden;margin-top: 30rpx;height:60vh;">
						<view v-if="three_yuan.length>0" style="width: 78%;margin-bottom: 40rpx;"
							v-for="(child, childIndex) in three_list" :key="childIndex">

							<view style="overflow: hidden;">
								<view style="width: 70%;float: left;">
									<view style="line-height:70rpx;color: #010101;font-size: 30rpx;font-weight: 600;">
										{{child.name}}
									</view>
								</view>
								<view @click="guanzhu(childIndex)" style="float: left;width: 30%;position: relative;">
									<text :class="child.is_sub==1?'active':'a'" style="display: inline-block;width:120rpx;height: 50rpx;line-height: 46rpx;border: 1px solid #1fb0ac;font-size: 22rpx;text-align: center;border-radius: 25rpx;margin-top: 10rpx;">
										<text v-if="child.is_sub==2">
											<text style="font-size: 30rpx;margin-right: 10rpx;">+</text>
											选择
										</text>
										<text v-if="child.is_sub==1">
											已选择
										</text>
									</text>
								</view>
							</view>
						</view>
						<view v-if="three_yuan.length<=0">
							<view style="width: 76%;line-height: 100rpx;text-align: center;font-size: 28rpx;color: #999999;">
								<image :src="require('@/static/my/no-data.png')" style="width: 100%;" mode="widthFix"></image>
								暂无数据
							</view>
						</view>
					</scroll-view>

				</view>

			</v-tabs-column>
		</view>
		<!-- <textarea   v-model="qita" style="width: 92%;margin: 20rpx auto;background-color: #FFFFFF;border-radius: 12rpx;padding: 20rpx;box-sizing: border-box;line-height: 40rpx;font-size: 30rpx;color: #000000;" placeholder-style="color: #333333;" placeholder="如没有您可选的经营范围，请在这里进行填写输入经营范围" /> -->
		<view class="jixu" @click="jixu">
			完成
		</view>


	</view>
</template>

<script>
	import vTabsColumn from '@/components/v-tabs-column.vue'
	import vgtTab from '@/components/vgt-tab1.vue'
	export default {
		components: {
			vTabsColumn,
			vgtTab
		},
		data() {
			return {
				current: 0,
				one_yuan: [],
				two_yuan: [],
				three_yuan: [],
				two_quan: [
					{name:'全部'}
				],
				three_quan: [{
					name: '全部',
					en_name: '此分类下的全部厂家',
					is_sub:2,
					id:''
				}],
				tabs: [],
				list: [],
				three_list: [],
				pid:'',
				two_pid:'',
				one_index:0,
				two_index:0,

				scrollViewLeftArr: new Map(), // 存储scroll信息
				choseInd:0, // 当前选中
				position: 0, // 滑动位置
				windowWidth: 0, // 页面高度
				isShowList: false, // 是否展示为列表形式

				qita:''
			}
		},
		onLoad() {
			this.one()
		},

		computed: {
		    getDefaultStyle() {
		       const { itemStyleDefault } = this
		        let defaultStyleObj = {
		            color: '#757879'
		        }
		        return this.setStyle(defaultStyleObj, itemStyleDefault)
		    },
		    getActiveStyle() {
		        const { itemStyleActive } = this
		        let activeStyleObj = {
		            color: '#000000',
		            'background-color': '#DEEEFF;'
		        }
		        return this.setStyle(activeStyleObj, itemStyleActive)
		    }
		},
		async mounted() {
		//     const { defaultChoseInd, defaultChoseItem }  = this || {}
		//     this.choseInd = defaultChoseInd

		//     let defaultItemInd = -1
		//     if (defaultChoseItem) {
		//        defaultItemInd =  this.list.findIndex((item) => item === defaultChoseItem)
		//        this.choseInd = defaultItemInd !== -1 ? defaultItemInd : 0
		//     }

		    const [_, { windowWidth }] = await uni.getSystemInfo() || {}
		    this.windowWidth = windowWidth
			console.log( this.windowWidth,123456789)
		    // 获取列表每个dom的偏移量
		    const query = uni.createSelectorQuery().in(this)
		    query.selectAll('.scroll-view-item').boundingClientRect()
		    query.exec((res) => {
		        res && res.length && res[0].forEach((element, i)=> {
		            const { left } = element || {}
		            const obj = {
		                left: left,
		            }
		            this.scrollViewLeftArr.set(i, obj)
		            if (i === defaultChoseInd && !defaultChoseItem) {
		                this.position = left - (windowWidth / 3 - 30)
		            }
		            if (i === defaultItemInd && defaultChoseItem) {
		                this.position = left - (windowWidth / 3 - 30)
		            }
		        })
		    })

		},
		methods: {

			changeTab(index) {
				console.log(index,this.two_index)
				this.one_index=index
				this.list=[]
				this.three_list=[]
				this.current=0
				this.choseInd=0
				this.position=0
				this.two_pid=''
				this.pid=this.one_yuan[this.one_index].id
				this.two()

			},
			setStyle(DefaultStyleObj, CurrentStyleObj) {
			    Object.assign(DefaultStyleObj, CurrentStyleObj)
			    let style = ''
			    Object.keys(DefaultStyleObj).forEach(e=> {
			        style += `${e}: ${DefaultStyleObj[e]};`
			    })
			    return style
			},
			onClickScrollItem(index, data, event) {
			    this.choseInd = index
			    const { offsetLeft } = event.target
			    this.position = offsetLeft - (this.windowWidth / 3 - 40)
				console.log(index,11111)
				this.three_list=[]
				this.two_pid=this.two_yuan[this.choseInd].id
				this.three()
			},
			one: function() {
				this.one_yuan=[]
				this.two_yuan=[]
				this.three_yuan=[]
				this.tabs=[]
				this.list=[]
				this.three_list=[]
				let data={
					pid:this.pid,
					two_pid:this.two_pid
				}
				this.post('api/firm/business', data, true).then(res => {
					console.log(res)
					if (res.code == 1) {


						console.log(this.three_quan,123456)
						this.one_yuan = res.data.one
						this.two_yuan = this.two_quan.concat(res.data.two)

						this.three_yuan = this.three_quan.concat(res.data.three)
						for (let i = 0; i < res.data.one.length; i++) {
							this.tabs.push(res.data.one[i].name)
						}
						for (let j = 0; j < this.two_yuan.length; j++) {
							this.list.push(this.two_yuan[j].name)
						}
						for (let k = 0; k < this.three_yuan.length; k++) {
							this.three_list.push({name:this.three_yuan[k].name,
												en_name:this.three_yuan[k].en_name,
												is_sub:this.three_yuan[k].is_sub,
												id:this.three_yuan[k].id})
						}
						if(this.three_list.length>1){
							for (let m = 1; m < this.three_list.length; m++) {
								if(this.three_list[m].is_sub==2){
									this.three_list[0].is_sub=2
									return
								}else{
									if(this.choseInd==0){
										if(this.one_yuan[this.one_index].is_sub==1){
											this.three_list[0].is_sub=1
										}else{
											this.three_list[0].is_sub=2
										}
									}else{

										if(this.two_yuan[this.choseInd].is_sub==1){
											this.three_list[0].is_sub=1
										}else{
											this.three_list[0].is_sub=2
										}
									}
								}
							}
						}else{
							if(this.choseInd==0){
								if(this.one_yuan[this.one_index].is_sub==1){
									this.three_list[0].is_sub=1
								}else{
									this.three_list[0].is_sub=2
								}
							}else{
								if(this.two_yuan[this.choseInd].is_sub==1){
									this.three_list[0].is_sub=1
								}else{
									this.three_list[0].is_sub=2
								}
							}
						}
					}
				})
			},
			two: function() {
				// this.one_yuan=[]
				// this.two_yuan=[]
				this.three_yuan=[]
				// this.tabs=[]
				// this.list=[]
				this.three_list=[]
				let data={
					pid:this.pid,
					two_pid:this.two_pid
				}
				this.post('api/firm/business', data, true).then(res => {
					console.log(res)
					if (res.code == 1) {
						// if(res.data.three.length>0){
						// 	for (let m = 0; m < res.data.three.length; m++) {
						// 		if(res.data.three[m].is_sub==2){
						// 			this.three_quan[0].is_sub=2
						// 			return
						// 		}else{
						// 			this.three_quan[0].is_sub=1
						// 		}
						// 	}
						// }else{
						// 	this.three_quan[0].is_sub=2
						// }

						console.log(this.three_quan,123456)
						this.two_yuan = this.two_quan.concat(res.data.two)
						this.three_yuan = this.three_quan.concat(res.data.three)
						for (let j = 0; j < this.two_yuan.length; j++) {
							this.list.push(this.two_yuan[j].name)
						}
						for (let k = 0; k < this.three_yuan.length; k++) {
							this.three_list.push({name:this.three_yuan[k].name,
												en_name:this.three_yuan[k].en_name,
												is_sub:this.three_yuan[k].is_sub,
												id:this.three_yuan[k].id})
						}
						if(this.three_list.length>1){
							for (let m = 1; m < this.three_list.length; m++) {
								if(this.three_list[m].is_sub==2){
									this.three_list[0].is_sub=2
									return
								}else{
									if(this.choseInd==0){
										if(this.one_yuan[this.one_index].is_sub==1){
											this.three_list[0].is_sub=1
										}else{
											this.three_list[0].is_sub=2
										}
									}else{

										if(this.two_yuan[this.choseInd].is_sub==1){
											this.three_list[0].is_sub=1
										}else{
											this.three_list[0].is_sub=2
										}
									}
								}
							}
						}else{
							if(this.choseInd==0){
								if(this.one_yuan[this.one_index].is_sub==1){
									this.three_list[0].is_sub=1
								}else{
									this.three_list[0].is_sub=2
								}
							}else{
								if(this.two_yuan[this.choseInd].is_sub==1){
									this.three_list[0].is_sub=1
								}else{
									this.three_list[0].is_sub=2
								}
							}
						}

					}
				})
			},
			three: function() {
				// this.one_yuan=[]
				// this.two_yuan=[]
				this.three_yuan=[]
				// this.tabs=[]
				// this.list=[]
				this.three_list=[]
				let data={
					pid:this.pid,
					two_pid:this.two_pid
				}
				this.post('api/firm/business', data, true).then(res => {
					console.log(res)
					if (res.code == 1) {
						// if(res.data.three.length>0){
						// 	for (let m = 0; m < res.data.three.length; m++) {
						// 		if(res.data.three[m].is_sub==2){
						// 			this.three_quan[0].is_sub=2
						// 			return
						// 		}else{
						// 			this.three_quan[0].is_sub=1
						// 		}
						// 	}
						// }else{
						// 	this.three_quan[0].is_sub=2
						// }

						console.log(this.three_quan,123456,this.one_yuan)
						this.one_yuan=res.data.one
						this.three_yuan = this.three_quan.concat(res.data.three)
						for (let k = 0; k < this.three_yuan.length; k++) {
							this.three_list.push({name:this.three_yuan[k].name,
												en_name:this.three_yuan[k].en_name,
												is_sub:this.three_yuan[k].is_sub,
												id:this.three_yuan[k].id})
						}
						if(this.three_list.length>1){

							for (let m = 1; m < this.three_list.length; m++) {
								if(this.three_list[m].is_sub==2){
									this.three_list[0].is_sub=2
									return
								}else{
									console.log(112111111118888)
									if(this.choseInd==0){
										if(this.one_yuan[this.one_index].is_sub==1){
											this.three_list[0].is_sub=1
										}else{
											this.three_list[0].is_sub=2
										}
									}else{
										console.log(11211111111777)
										if(this.two_yuan[this.choseInd].is_sub==1){
											this.three_list[0].is_sub=1
										}else{
											this.three_list[0].is_sub=2
										}
									}
								}
							}
						}else{
							console.log(10000000000000000000)
							if(this.choseInd==0){
								if(this.one_yuan[this.one_index].is_sub==1){
									this.three_list[0].is_sub=1
								}else{
									this.three_list[0].is_sub=2
								}
							}else{

								if(this.two_yuan[this.choseInd].is_sub==1){
									this.three_list[0].is_sub=1
								}else{
									this.three_list[0].is_sub=2
								}
							}

						}

					}
				})
			},
			guanzhu:function(index){
				let category_id=''
				let type=''
				if(index==0){
					if(this.choseInd==0){
						category_id=this.one_yuan[this.current].id
						type=1
					}else{
						category_id=this.two_yuan[this.choseInd].id
						type=2
					}
				}else{
					category_id=this.three_yuan[index].id
					type=3
				}
				this.post('api/firm/add_business',{manage_id:category_id},true).then(res=>{
					if(res.code==1){
						if(type==1){
							this.one()
						}else if(type==2){
							this.two()
						}else{
							this.three()
						}
						return
						if(res.data){
							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 1000
							})
							if(index==0){
								for(let i=0;i<this.three_list.length;i++){
									this.three_list[i].is_sub=1
								}
							}else{
								this.three_list[index].is_sub=1
								if(this.three_list.length>1){
									for (let m = 1; m < this.three_list.length; m++) {
										if(this.three_list[m].is_sub==2){
											this.three_list[0].is_sub=2
											return
										}else{
											if(this.choseInd==0){
												if(this.one_yuan[this.one_index].is_sub==1){
													this.three_list[0].is_sub=1
												}else{
													this.three_list[0].is_sub=2
												}
											}else{

												if(this.two_yuan[this.choseInd].is_sub==1){
													this.three_list[0].is_sub=1
												}else{
													this.three_list[0].is_sub=2
												}
											}
										}
									}
								}else{
									if(this.choseInd==0){
										if(this.one_yuan[this.one_index].is_sub==1){
											this.three_list[0].is_sub=1
										}else{
											this.three_list[0].is_sub=2
										}
									}else{
										if(this.two_yuan[this.choseInd].is_sub==1){
											this.three_list[0].is_sub=1
										}else{
											this.three_list[0].is_sub=2
										}
									}
								}
								this.$forceUpdate()
							}



						}else{
							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 1000
							})
							if(index==0){
								for(let i=0;i<this.three_list.length;i++){
									this.three_list[i].is_sub=2
								}
							}else{
								this.three_list[index].is_sub=2
								if(this.three_list.length>1){
									for (let m = 1; m < this.three_list.length; m++) {
										if(this.three_list[m].is_sub==2){
											this.three_list[0].is_sub=2
											return
										}else{
											if(this.choseInd==0){
												if(this.one_yuan[this.one_index].is_sub==1){
													this.three_list[0].is_sub=1
												}else{
													this.three_list[0].is_sub=2
												}
											}else{

												if(this.two_yuan[this.choseInd].is_sub==1){
													this.three_list[0].is_sub=1
												}else{
													this.three_list[0].is_sub=2
												}
											}
										}
									}
								}else{
									if(this.choseInd==0){
										if(this.one_yuan[this.one_index].is_sub==1){
											this.three_list[0].is_sub=1
										}else{
											this.three_list[0].is_sub=2
										}
									}else{
										if(this.two_yuan[this.choseInd].is_sub==1){
											this.three_list[0].is_sub=1
										}else{
											this.three_list[0].is_sub=2
										}
									}
								}
								this.$forceUpdate()
							}
						}

					}
				})

			},
			jixu:function(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang="scss">
	.flex {
	    display: flex;
	}

	.flex-wrap {
	    flex-wrap: wrap;
	}

	.padding-lr {
	    padding: 0 30rpx;
	}

	.padding-bottom-sm {
	    padding-bottom: 20rpx;
	}

	.justify-between {
	    justify-content: space-between;
	}

	.align-center {
	    align-items: center;
	}

	.text-lineheight-lg {
	    line-height: 80rpx;
	}

	.border-bottom-solid-ccc {
	    border-bottom: 1rpx solid #ccc;
	}

	.size-28 {
	    font-size: 28rpx;
	}

	.scroll-view_hold {
	    position: relative;
	    /* padding: 30rpx 0 30rpx 0; */
	    width: 100%;
	    overflow: hidden;
	    white-space: nowrap;
	   /* background: #fff; */
	}

	.scroll-view_hold  ::-webkit-scrollbar {
	    width: 0;
	    height: 0;
	    color: transparent;
	}

	.scroll-view-item {
	   /* min-width: 120rpx; */
	    padding: 0 40rpx;
	    display: inline-block;
	    text-align: center;
	    line-height: 60rpx;
	    font-size: 25rpx;
	    border-radius: 12rpx;
	    margin: 0 20rpx 0 0rpx;
		background-color: #F9F7F8;
	}

	.scroll-wrap {
	    position: relative;
	    width: 100%;
	}

	.open-list {
	    position: absolute;
	    right: 0;
	    top: 0;
	    width: 60rpx;
	    line-height: 119rpx;
	    text-align: center;
	    font-weight: 600;
	    color: #585858;
	    background: rgba(255, 255, 255, 0.7);
	}

	.scroll-view-item_wrap {
	    min-width: 140rpx;
	    text-align: center;
	    line-height: 60rpx;
	    font-size: 25rpx;
	    border-radius: 32rpx;
	    margin: 20rpx 0 0 30rpx;
	}

	.icon-unfold {
	    width: 30rpx;
	    height: 60rpx;
	    padding: 30rpx 0 30rpx 0;
	}

	.icon-fold {
	    width: 30rpx;
	    height: 60rpx;
	}
	page {
		background-color: #F8F8F8 !important;
		padding-bottom: 30rpx;
		font-family: Demibold;
	}

	.jixu {
		width: 620rpx;
		height: 90rpx;
		background: #1fb0ac;
		border-radius: 45rpx;
		text-align: center;
		line-height: 90rpx;
		color: #FFFFFF;
		font-size: 28rpx;
		margin: 80rpx auto 20rpx;
	}

	.wanshan {
		color: #000000;
		font-size: 22rpx;
		opacity: 0.5;
		line-height: 40rpx;
		text-align: center;
	}

	.tiaoguo {
		width: 160rpx;
		height: 58rpx;
		background: rgba(0, 0, 0, 0.05);
		border: 1px solid #DDDDDD;
		border-radius: 29rpx;
		line-height: 58rpx;
		color: #666666;
		font-size: 24rpx;
		margin: 40rpx auto 20rpx;
		text-align: center;
	}
	.active{
		background-color: #1fb0ac;
		color: #FFFFFF;
	}
	.a{
		background-color: none;
		color: #1fb0ac;
	}
</style>
